Multimedia

CSS - navigatie met submenu

Doelstelling

In deze les leren we:

1. hoe je menu's opmaakt in CSS;
2. hoe je lettertypes kiest
3. en hoe je de lettergrootte bepaalt;

Leerpad

1. Wat zijn css pseudo-klassen?
2. Een kleurenpalet kiezen
3. Lettertype - terminologie
4. CSS eigenschap: font-family
5. CSS eigenschap: font-size

Oefening

1. Maak een submap met de naam navigatie.
2. Kopieer de bestanden van de map cssnaar de map navigatie.
3. We werken verder in marsman.html en app.css.
4. De oefening vind je in Navigatie opmaken met CSS.
5. Bekijk het filmpje Bloemlezing Marsman navigatie opmaak.

Opdracht

1. De benamingen in het filmpje kunnen verschillen van de opgeven namen in de opdracht!!!! Volg de namen zoals die in de opdracht zijn opgegeven.
2. Werk in de submap met de naam navigatie.
3. Maak een nieuw css bestand voor je eigen webpagina en geef het de naam style.css. Plaats dit bestand in de submap met de naam css.
4. Maak een kleurenpalet en voeg die toe in je Word document dat je de vorige les al hebt gemaakt.
5. Voeg navigatieopmaak toe aan je eigen webpagina en plaats de css in je eigen style.css. Voeg zowel de horizontale als de verticale navigatieopmaak toe in je webpagina. Plaats de CSS in style.css.
6. Stel een tabel op met de fontfamilie (lettertype) voor de verschillende tekstonderdelen van de pagina's op je website. Je vindt hier een voorbeeld. Je hoeft niet dezelfde groottes te gebruiken. Je maakt je eigen keuze. Voeg die tabel toe aan je dossier (het Word document dat je de vorige les al hebt gemaakt).
7. Voeg de de gekozen fontfamilies toe in je eigen style.css bestand.
8. Stel een tabel op met de lettergrootte voor de verschillende elementen van je website. Je vindt hier een voorbeeld. Je hoeft niet dezelfde groottes te gebruiken. Je maakt je eigen keuze. Voeg die tabel toe aan je dossier (het Word document dat je de vorige les al hebt gemaakt).
9. Voeg de lettergroottes toe in je eigen style.css bestand.
10. Stuur mij een email (jef.inghelbrecht@telenet.be) waarmee je me uitnodigt je workspace op Cloud9 te delen. Lezen en schrijven. Ik zal op je Cloud9 IDE je werk bekijken. In het filmpje Een workspace op Cloud9 delen kan je zien hoe je dat doet.
11. Stuur je dossier (Word document) via de onderstaande link.